import React, { RefObject, useRef, useState } from 'react'
import style from './index.less';
import { Button, DatePickerRef, Form, Input, Modal, NoticeBar, Picker, Popup, Space, TextArea } from 'antd-mobile';
import { CalculatorOutline, LocationFill } from 'antd-mobile-icons';
import PriceArea from '@/components/jiagequjian';
import { divide } from 'lodash';
import { history } from 'umi';
import Pick from '@/components/area-picker';
import List from './list'
import { getcd } from '@/services/caig'

interface Shipment {
    areaCode: string
    shipmentPlace: string[]
}



const Dingdan = () => {
    const [form] = Form.useForm();
    const [visibles, setVisibles] = useState(false)
    // const priceArea = useRef<any>()
    const [visibleq, setVisibleq] = useState(false)
    const [visible, setVisible] = React.useState<boolean>(false);
    const [value, setValue] = useState<Shipment>({} as Shipment)
    const [valuep, setValuep] = useState<Shipment>({} as Shipment)

    // const changePriceArea = (value: number[]) => {
    //     priceArea.current = { ...value }
    // }

    const onFinish = async (values: any) => {
       
        const messgae = { ...value, ...values, }
        const res = await getcd(messgae)
        console.log(messgae)
    }




    return (


        <div className={style.page}>
            <div className={style.content}>
                <Form form={form} layout='horizontal'
                    onFinish={onFinish}
                    initialValues={{shangpingjia:[]}}
                    footer={
                        <div className={style['btn-warp']}>
                            <div>
                                <Button
                                    block color='success'
                                    size='large' 
                                    onClick={()=>{
                                        form.submit()
                                       
                                    }
                                    }
                                // onClick={() => {
                                //     history.push('/fabucaigou/record/');
                                // }}  
                                >
                                    提交
                                </Button>
                            </div>
                        </div>
                    }
                >
                    <div className={style.block}>
                        <div className={style.title}>基本信息</div>
                        {/* <Form.Item
                            label='商品分类'
                            name='usernam1e'
                            onClick={() => {
                                setVisible(true);
                            }}
                            // rules={[{ required: true, message: '商品分类不能为空!' }]}
                            extra={
                                <span className={style.fenlei}>
                                    <CalculatorOutline className={style.icon} />
                                    选择
                                </span>
                            }
                        >
                        </Form.Item> */}
                        <NoticeBar
                            content='开票名称：白菜（如未匹配，请修改商品名称）'
                            wrap
                            color='alert'
                            icon={<LocationFill />}
                        />
                        <Form.Item
                            label='商品名称'
                            name='shangpingming'
                            rules={[{ required: true, message: '姓名不能为空!' }]}
                        >
                            <Input
                                placeholder='请输入'
                                style={{ '--text-align': 'right' }}

                                clearable
                            />
                        </Form.Item>
                        <Form.Item
                            label='商品产地'
                            name='username'
                            rules={[{ required: true, message: '商品产地不能为空!' }]}
                            onClick={() => {
                                setVisibles(true)
                            }}
                            getValueFromEvent={(e) => {
                                console.log(e, '父组件获取值');
                                form.setFieldValue('username', e)
                                return e
                            }}

                        >
                            <Pick

                                visible={visibles}
                                onClose={() => {
                                    setVisibles(false)
                                }}
                                onConfirm={v => {
                                    form.setFieldValue('username', v)
                                    setValue(v)
                                }}

                            />
                            {form.getFieldValue('username')?.shipmentPlace}
                        </Form.Item>
                        <Form.Item
                            label='商品发货地'
                            name='shipmentPlace'
                            rules={[{ required: true, message: '商品发货地姓名不能为空!' }]}
                            onClick={() => {
                                setVisibleq(true)
                            }}
                            getValueFromEvent={(e) => {
                                console.log(e, '父组件获取值');
                                form.setFieldValue('shipmentPlace', e)
                                return e
                            }}

                        >
                            <Pick

                                visible={visibleq}
                                onClose={() => {
                                    setVisibleq(false)
                                }}
                                onConfirm={v => {
                                    
                                    setValuep(v)
                                    form.setFieldValue('shipmentPlace',v)
                                }}
                            />
                            {form.getFieldValue('shipmentPlace')?.shipmentPlace}
                        </Form.Item>
                        <Form.Item
                            label='商品单价'
                            name='shangpingjia'
                            rules={[{ required: true, message: '商品单价不能为空!' }]}
                        >
                            <PriceArea />
                        </Form.Item>
                        <Form.Item
                            label='商品数量'
                            name='shangpingshul'
                            rules={[{ required: true, message: '商品数量不能为空!' }]}
                            extra='斤'
                        >
                            <Input
                                placeholder='请输入'
                                style={{ '--text-align': 'right' }}
                                clearable

                            />
                        </Form.Item>
                    </div>


                    <Form.Item
                        label='商品描述'
                        layout='vertical'
                        name='shangpingms'
                        rules={[{ required: true, message: '商品描述不能为空!' }]}
                        className='xxxxxxxxxx'
                    >
                        <div className={style.block}>


                            <TextArea
                                placeholder='请输入'
                                autoSize={{ minRows: 3, maxRows: 5 }}
                            />
                        </div>
                    </Form.Item>



                    <Popup
                        bodyStyle={{ height: '100vh' }}
                        visible={visible}
                        onMaskClick={() => {
                            setVisible(false);
                        }}



                    >
                        {<div className={style.modal}>
                            <List showSearch={true} />
                            <div className={style.btn}>
                                <Button block color='success' size='large' onClick={() => setVisible(false)}>
                                    确定
                                </Button>
                            </div>
                        </div>}
                    </Popup>
                </Form>
            </div>

        </div>



    )
}
export default Dingdan;
